<!-- iCheck -->
<script src="/static/plugins/icheck/icheck.min.js"></script>
<!-- 验证插件 -->
<script src="/static/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/plugins/jquery-validation/localization/messages_zh.min.js"></script>
<!-- 针对当前主题进行简单封装，精简代码 -->
<script src="/static/sdtheme/scripts/sdvalidate.js"></script>

<script src="/static/plugins/three/three.min.js"></script>

<script>
    $(function () {
        pageInit();        
    });

    function pageInit() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });

        //验证
        validateInfo();
    }

    //表单验证及AJAX提交
    function validateInfo() {
        var $thisForm = $('#thisForm');
        $thisForm.sdvalidate({
            rules: {
                UserName: {
                    maxlength: 24,
                    required: true
                },
                UserPwd: {
                    maxlength: 24,
                    required: true
                }
            },
            messages: {
                UserName: {
                    maxlength: "长度不大于24位",
                    required: "请输入用户名"
                },
                UserPwd: {
                    maxlength: "长度不大于24位",
                    required: "请输入密码"
                }
            },

            submitHandler: function (form) {
                var url = '{{ urlfor "HomeController.DoLogin"}}';
                var params = $thisForm.serialize();
                $.sdpost(url, params, function (re) {
                    if (re.code === 0) {                       
                        window.location.href='{{ urlfor "HomeController.Index"}}'
                    } else {
                        layer.alert(re.msg, { icon: 2, title: '失败' })
                    }
                });
                return false;
            }
        });
    }

    function FormSubmit() {
        $("#thisForm").submit();
    }
</script>


<script type="text/javascript">
    var container, camera, scene, renderer, particles, particle,
            SEPARATION = 100,
            AMOUNTX = 50,
            AMOUNTY = 50,
            count = 0,
            mouseX = 100,
            mouseY = -900,
            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2;
    init();
    animate();

    function init() {
        container = document.createElement("div"),
                document.body.appendChild(container),
                container.setAttribute("style", "position:absolute;top:0;left:0;height:100%;background: rgba(255,255,255, 0);z-index:-999;"),
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1e4),
                camera.position.z = 1500,
                scene = new THREE.Scene,
                particles = new Array;
        for (var e = 2 * Math.PI, n = new THREE.ParticleCanvasMaterial({
            color: 61166,
            // color: 890234,
            // color: 621531,
            program: function(n) {
                n.beginPath(), n.arc(0, 0, 1, 0, e, !0), n.fill()
            }
        }), i = 0, r = 0; r < AMOUNTX; r++)
            for (var t = 0; t < AMOUNTY; t++)
                particle = particles[i++] = new THREE.Particle(n),
                        particle.position.x = r * SEPARATION - AMOUNTX * SEPARATION / 2,
                        particle.position.z = t * SEPARATION - AMOUNTY * SEPARATION / 2,
                        scene.add(particle);
        renderer = new THREE.CanvasRenderer,
                renderer.setSize(window.innerWidth, window.innerHeight - 5),
                container.appendChild(renderer.domElement),
                window.addEventListener("resize", onWindowResize, !1)
    }

    function onWindowResize() {
        windowHalfX = window.innerWidth / 2,
                windowHalfY = window.innerHeight / 2,
                camera.aspect = window.innerWidth / window.innerHeight,
                camera.updateProjectionMatrix(),
                renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function animate() {
        requestAnimationFrame(animate), render()
    }

    function render() {
        camera.position.x += .05 * (mouseX - camera.position.x),
                camera.position.y += .05 * (-mouseY - camera.position.y),
                camera.lookAt(scene.position);
        for (var n = 0, e = 0; e < AMOUNTX; e++)
            for (var i = 0; i < AMOUNTY; i++)
                particle = particles[n++],
                        particle.position.y = 50 * Math.sin(.3 * (e + count)) + 50 * Math.sin(.5 * (i + count)),
                        particle.scale.x = particle.scale.y = 2 * (Math.sin(.3 * (e + count)) + 1) + 2 * (Math.sin(.5 * (i + count)) + 1);
        renderer.render(scene, camera), count += .1
    }
</script>